<template>
  <div
    class="
      w-full
      bg-white
      flex-col
      overflow-auto
      items-center
      flex
      mt-8
      rounded-lg
      shadow-2xl
    "
  >
    <!-- 头像 -->
    <div
      class="
        w-full
        bg-gray-100
        h-64
        flex
        justify-center
        items-center
        flex-col
        text-white
      "
      style="
        background: url('https://chen110.oss-cn-guangzhou.aliyuncs.com/2021/08/04/timthumb%20(3).jpeg');
      "
    >
      <el-avatar :size="80" :src="avatar"></el-avatar>
      <p>{{nickname}}</p>
      <p>{{signature}}</p>
    </div>
    <!-- 图标 -->
    <div class="w-full bg-white h-20 flex justify-center items-center">图标等等</div>
    <!-- 数据 -->
    <div class="flex items-center py-6 space-x-8">
      <div class="flex flex-col items-center">
        <p>{{$store.state.userInfo.nowUserArticleNum}}</p>
        <p>文章</p>
      </div>
      <div class="flex flex-col items-center">
        <p>{{$store.state.userInfo.nowUserCommentNum}}</p>
        <p>评论</p>
      </div>
      <div class="flex flex-col items-center">
        <p>1,256</p>
        <p>访问量</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "UserInfo",
  data() {
    return {
      avatarUrl:
        "https://chen110.oss-cn-guangzhou.aliyuncs.com/2021/08/04/timthumb%20(3).jpeg",
    };
  },
  computed: {
    avatar: function(){
      return this.$store.state.userInfo.nowUserAvatar
    },
    username() {
      return this.$store.state.userInfo.nowUsername
    },
    nickname(){
      return this.$store.state.userInfo.nowUserNickname
    },
    signature(){
      return this.$store.state.userInfo.nowUserSignature
    }
  },
  components: {},
};
</script>
<style scoped>
</style>